<template>
    <div :id="id" class=" ">
        <el-menu v-if="showControlButton">
            <el-menu-item v-on:click="changeShowOrCollapse" style="text-align: end">
                <div class=" el-icon-more"></div>
            </el-menu-item>
        </el-menu>
        <el-menu
            ref="navMenuContent"
            :default-active="defaultActiveIndex"
            :class="'  ' + menuClass"
            style="z-index: 99;  display: block;"
            :mode="navMode"
            :collapse="isCollapse"
            :unique-opened="true">
            <slot name="prepend"></slot>
            <menu-nav-item v-for="(menu, key) in menus"
                           v-on:callback="menuCallback"
                           :menu="menu"
                           :key="key"
                           :index="menu.index||String(key)">
                <template v-slot="{item}">
                    <slot :item="item"></slot>
                </template>

            </menu-nav-item>
            <slot name="append"></slot>
        </el-menu>
    </div>


</template>

<script>
    import menuNavItem from './menuNavItemComponent.vue'

    export default {
        name: 'menuNav',
        components: {
            menuNavItem
        },
        props: {
            dataMenus: {
                type: [Array, Object],
                default: () => {
                    return []
                }
            },
            dataMenuKey: {
                type: String,
                default: 'main'
            },
            mode: {
                type: String,
                default: 'auto'
            },
            stateChangeOn: {
                type: String,
                default: 'md'
            },
            dataActiveIndex: {
                type: [String, Number],
                default: () => {
                    return ''
                }
            },


            id: {
                type: String,
                default: 'nav-menu-' + LeUtils.randomString(6)
            },
        },
        data() {
            return {
                menus: [],
                navMode: "horizontal",
                isCollapse: false,
                isHidden: false,
                showControlButton: false,
                defaultActiveIndex: '',
            }
        },
        computed: {
            menuClass() {
                let c = '';
                if (this.isHidden || this.menus.length <= 0) {
                    c = 'd-none';
                }
                return c;
            }
        },
        async created() {
            let _this = this;

            if (Object.keys(this.dataMenus).length > 0) {
                this.menus = this.dataMenus;
            } else {
                await LeRoute.quiet().request('api.l-e-s.menus', {menu_key: _this.dataMenuKey})
                    .then(function (res_data) {
                        _this.menus = LeUtils.valueGet(res_data, 'data',[]);
                        _this.$nextTick(function () {
                            _this.computeActiveIndex()

                        })
                    });

            }


        },
        mounted() {
            let _this = this;
            _this.initDisplay()
            _this.$nextTick(function () {
                _this.computeActiveIndex()

            })
        },

        methods: {
            initDisplay: function () {
                if (LeDisplay.lt(this.stateChangeOn)) {
                    this.navMode = 'auto' == this.mode ? 'vertical' : this.mode;
                    this.showControlButton = true;
                    this.changeShowOrCollapse(false)
                } else {
                    this.navMode = 'auto' == this.mode ? 'horizontal' : this.mode;
                    this.showControlButton = false;
                    this.changeShowOrCollapse(true)
                }
                ;


            },
            computeActiveIndex: function () {
                let _this = this;
                if (_this.dataActiveIndex) {
                    _this.defaultActiveIndex = this.dataActiveIndex
                    return true;
                }


                let menuItems = LeUtils.valueGet(_this.$refs, 'navMenuContent.$children', []);
                let indexs = LeUtils.valueGet(window, 'LeServiceRouteCurrent', window.location.pathname).replace(/\//g, '.').ltrim('.').split('.');
                let indexLength = indexs.length
                for (let i = 0; i < indexLength; indexLength--) {
                    let index = indexs.slice(0, indexLength).join('.');
                    if (_this.computeMenuItemsActiveIndex(menuItems, index)) {
                        return true;
                    }
                    if(indexLength == indexs.length){
                      if (_this.computeMenuItemsActiveIndex(menuItems, indexs.slice(0, indexLength-1).join('.') + '.*')) {
                        return true;
                      }
                    }else if (indexLength < indexs.length) {
                        index += '.*';
                        if (_this.computeMenuItemsActiveIndex(menuItems, index)) {
                            return true;
                        }
                    }
                }


                return false;

            },
            computeMenuItemsActiveIndex: function (menuItems, index) {
                //console.log(menuItems);
                if (!(LeUtils.typeIs('array', menuItems) || LeUtils.typeIs('object', menuItems))) {
                    return false;
                }
                let _this = this;

                for (let i in menuItems) {
                    let children = LeUtils.valueGet(menuItems[i], '$children', [])
                    if (children.length > 0) {
                        if (_this.computeMenuItemsActiveIndex(children, index)) {
                            return true;
                        }
                    }
                }

                //'console' == _this.dataMenuKey && console.log('f:' + index);
                if (menuItems.find(function (item) {
                  //'console' == _this.dataMenuKey && console.log(LeUtils.valueGet(item, 'index', ''));
                    return index == LeUtils.valueGet(item, 'index', '');
                })) {
                    _this.defaultActiveIndex = index;
                  //'console' == _this.dataMenuKey && console.log(index + ':find');
                    return true;
                }



                return false;
            },
            changeShowOrCollapse: function (state) {

                if ('vertical' == this.mode) {
                    this.isCollapse = typeof state == "boolean" ? !state : !this.isCollapse
                    this.isHidden = false;
                } else {
                    this.isHidden = typeof state == "boolean" ? !state : !this.isHidden;
                    this.isCollapse = false;
                }

            },
            menuCallback: function (value) {
                if (LeUtils.typeIs('function', window.menuCallback)) {
                    return window.menuCallback(value);
                }

                //console.log('menu callback :' + value);
                return;
            }
        }
    }
</script>
